<template>
	<div class="user-card-container">
		<div>
			<span class="title">姓名：</span>
			<span class="info">{{ props.data.name }}</span>
		</div>
		<div>
			<span class="title">年龄：</span>
			<span class="info">{{ props.data.age }}</span>
		</div>
		<div>
			<span class="title">性别：</span>
			<span class="info">{{ props.data.gender }}</span>
		</div>
		<div>
			<span class="title">介绍：</span>
			<span class="info">{{
				`我是${props.data.name}，今年${props.data.age}岁，性别${props.data.gender}`
			}}</span>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	data: {
		type: Object,
		default: () => ({
			name: "未命名",
			age: 0,
			gender: "未知",
			introduction: "暂无介绍",
		}),
	},
});
</script>

<style>
.user-card-container {
	position: relative;
}
.title {
	color: rgba(0, 0, 0, 0.85);
	font-size: 20px;
	font-weight: bold;
}
.info {
	color: rgba(0, 0, 0, 0.65);
	font-size: 18px;
}
</style>
